<template>
<div>
  <!-- 导航拦 -->
<div class="login_contant">
  <van-nav-bar
  class='page_navbar'
  title="登陆"

/>
</div>
<!-- 登陆框表单 -->
<van-form @submit="onSubmit">
  <van-field

    name="用户名"

    placeholder="请输入手机号"
    v-model="user.mobile"

  >
  <i slot="left-icon" class="toutiao toutiao-shouji"></i>
  </van-field>
  <van-field

    name="密码"
v-model="user.code"
    placeholder="请输入验证码"

  >
  <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
   <i slot="left-icon" class="sx"></i>

   <van-button size="small" type="primary" slot="button" class="yzmbtn" >发送验证码</van-button>
  </van-field>
  <div style="margin: 16px;">
    <van-button  block type="info" native-type="submit" class="longin_btn">登陆</van-button>
  </div>
</van-form>

</div>
</template>

<script>

import { login } from '@/api/user.js'
export default {
  name: 'LoginIndex',
  data () {
    return {
      user: {
        mobile: '',
        code: ''
      }

    }
  },
  methods: {
    async onSubmit () {
      const user = this.user
      try {
        const res = await login(user)
        console.log('登录成功', res)
      } catch (err) {
        if (err.response.status === 400) {
          console.log('登录失败', err)
        }
      }
    }

  }
}
</script>

<style scoped lang="less">
.toutiao {
font-size:37px;

}
.longin_btn{
background-color: #6db4fb;
}
.yzmbtn{

width: 158px;
height: 46px;
background-color: #ededed;
border-radius: 23px;
border-color: #ededed;

font-family: MicrosoftYaHei;
font-size: 20px;

color: #666666;
position: relative;

}
.sx{
  right: 220px;
  top: 25px;

display: inline-block;
position: absolute;
width: 2px;
height: 50px;
background-color: #eeeeee;
z-index: 99999;

}

</style>
